<template>
  <div style="padding: 0 30px">
    <div class="text">
      2013年集团对中国社会未来经济形势作出“消费中国”、“智慧中国”、“财富中国”、“并购中国”、“高端中国”五大趋势的判断，在充分研究的基础上，将财富管理业务作为未来集团战略发展的重点，决心做中国财富管理行业生态的改变者、推动者和引领者，做一个可持续经营的百年企业。
    </div>
    <!-- 企业成员 -->
    <div class="enterprise-member">
      <h3 class="title">企业成员</h3>
      <p class="clearfix">
        <a
          href="javascript:;"
          v-for="(item, index) in coverImgUrl"
          :key="index"
          :class="isactive == index ? 'cur' : ''"
          @click="changeImg(index)"
          :style="{
            backgroundImage: 'url(' + item + ')',
          }"
        >
        </a>
      </p>
      <div class="content">
        <div class="list-img">
          <img
            :src="item.name"
            alt=""
            v-for="(item, index) in list.imgContent"
            :key="index"
            :class="item.width == 'imgwidth' ? 'imgwidth' : ''"
          />
        </div>
        <div class="introduce">
          <h2>{{ list.introduceTitel }}</h2>
          <p class="introduce-text" v-for="(item, index) in list.introduceText" :key="index">
            {{ item.text }}
          </p>
          <p class="ewm">
            <span v-for="(item, index) in list.ewm" :key="index">
              {{ item.name }}
              <img :src="item.imgewm" alt="">
            </span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      coverImgUrl: {
        0: "http://www.juyike.cn/Public/Home/images/lczqLogo.jpg",
        1: "http://www.juyike.cn/Public/Home/images/fgdtlogo.jpg",
        2: "http://www.juyike.cn/Public/Home/images/rfjjLogo.jpg",
      },
      isactive: 0,
      list: null,
      ListContent: [
        {
          imgContent: [
            { name: "http://www.juyike.cn/Public/Home/images/img001.jpg" },
            { name: "http://www.juyike.cn/Public/Home/images/img002.jpg" },
            { name: "http://www.juyike.cn/Public/Home/images/img003.jpg" },
            { name: "http://www.juyike.cn/Public/Home/images/img004.jpg" },
          ],
          introduceTitel: "联储证券",
          introduceText: [
            { text: '联储证券有限责任公司（简称“联储证券”）是一家以“创造价值”为使命的综合性券商，致力于成为财富管理行业的改变者和推动者。联储证券专注于中国高净值人群和优质企业，致力于为客户提供高效、便捷、专业的投融资服务。公司秉承多元化的发展理念，为企业、个人、金融机构、政府客户和机构投资者提供一站式的业务服务。' },
            { text: '联储证券原名众成证券，成立于2001年2月28日，注册资本13.731亿元，注册地为深圳。2016年2月22日,“众成证券有限责任公司”' },
          ],
          ewm: [
            {
              name: '联储证券官网二维码：',
              imgewm: 'http://www.juyike.cn/Public/Home/images/clzqewm01.jpg'
            },
            {
              name: '微信订阅号二维码：',
              imgewm: 'http://www.juyike.cn/Public/Home/images/clzqewm02.jpg'
            },
            {
              name: '新浪微博二维码：',
              imgewm: 'http://www.juyike.cn/Public/Home/images/clzqewm02.jpg'
            },
          ],
        },
        {
          imgContent: [
            { name: "http://www.juyike.cn/Public/Home/images/img005.jpg" },
            { name: "http://www.juyike.cn/Public/Home/images/img006.jpg" },
            { name: "http://www.juyike.cn/Public/Home/images/img007.jpg" },
            { name: "http://www.juyike.cn/Public/Home/images/img008.jpg" },
          ],
          introduceTitel: "富国大通",
          introduceText: [
            { text: '北京富国大通资产管理有限公司成立于2014年，注册资金1亿元，为高净值人群提供公募基金、契约型基金、资管产品等优质资产配置。' },
            { text: '伴随中国资本市场的迅速发展，富国大通以前瞻性视野布局财富管理行业，将合规风控置于战略高度，帮助客户进行' },
          ],
          ewm: [
            {
              name: '富国大通订阅号：',
              imgewm: 'http://www.juyike.cn/Public/Home/images/fgdtewm01.jpg'
            },
            {
              name: '富国大通官网：',
              imgewm: 'http://www.juyike.cn/Public/Home/images/fgdtewm01.jpg'
            },
          ],
        },
        {
          imgContent: [
            { name: "http://www.juyike.cn/Public/Home/images/img011.jpg", width: 'imgwidth' },
            { name: "http://www.juyike.cn/Public/Home/images/img012.jpg", width: 'imgwidth' },
          ],
          introduceTitel: "北信瑞丰",
          introduceText: [
            { text: '北信瑞丰基金管理有限公司成立于2014年3月17日，是经中国证监会证监许可[2014]265号文批准，由北京国际信托有限公司与莱州瑞海投资有限公司两家股东共同发起设立的基金公司。公司结合基金行业特点改善公司治理结构，积极推进股权激励，并在专户业务及子公司各业务条线进行事业部制改革。北信瑞丰基金着力打造具有高水准的投研团队，公司高管和主要投资管理人员的金融相关从业年限均在10年以上，拥有丰富的管理经验和证券投资实战经验。' },
            { text: '截至2018年4月30日，公司共有17只公募产品，保有139只专户产品，资产管理规模超过420亿元，其中公募资产管理规模为57.68亿元（2014年8月成立第一只公募产品，2014年底达14亿，2015年底达34亿）。公司于2015年7月成立子公司，截至2018年4月30日，母子公司整体资管规模超过610亿元。' },
          ],
          ewm: [
            {
              name: '官方微信二维码：',
              imgewm: '	http://www.juyike.cn/Public/Home/images/bxrfewm01.jpg'
            },
            {
              name: '北信瑞丰微财富二维码：',
              imgewm: 'http://www.juyike.cn/Public/Home/images/bxrfewm02.jpg'
            },
          ],
        },
      ],
    };
  },
  created() {
    this.list = this.ListContent[0];
  },
  methods: {
    changeImg(index) {
      this.isactive = index;
      this.list = this.ListContent[index];
    },
  },
};
</script>

<style lang="less" scoped>
#app {
  text-align: left;
}
.text {
  width: 80%;
  margin: 0 auto;
  font-size: 18px;
  color: #333;
  font-size: 18px;
  color: #333;
  font: 16px/1.7 Tahoma, "Hiragino Sans GB", "Microsoft YaHei", arial, simsun,
    sans-serif;
  text-indent: 30px;
}
.enterprise-member {
  .title {
    border-left: 4px solid #ee020d;
    height: 26px;
    line-height: 26px;
    padding-left: 10px;
    font-size: 22px;
    margin: 40px 0;
    font-weight: normal;
  }
  .clearfix {
    margin: 0 auto 45px;
    width: 1000px;
    text-align: center;
    display: flow-root;
    a {
      width: 25%;
      cursor: pointer;
      max-width: 233px;
      display: inline-block;
      height: 88px;
      border: 1px solid #ccc;
      float: left;
      margin: 0 40px;
      img {
        background-size: 100% auto;
      }
    }
    .cur {
      border: 2px solid red;
      position: relative;
      height: 86px;
    }
    .cur:after {
      content: "";
      background: url(http://www.juyike.cn/Public/Home/images/act.png) no-repeat;
      width: 16px;
      height: 14px;
      position: absolute;
      left: 45.5%;
      bottom: -14px;
      display: block;
    }
  }
  .list-img {
    width: 96%;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    img {
      width: 24.89%;
      max-width: 276px;
      margin-left: 1px;
    }
  }
}
.imgwidth {
  width: 49.8% !important;
  max-width: 551px !important;
}
.introduce {
  h2 {
    font-weight: normal;
  }
  .introduce-text {
    width: 80%;
    margin: 0 auto;
    font-size: 16px;
    text-indent: 30px;
    color: #666;
    font: 16px/1.7 Tahoma,"Hiragino Sans GB","Microsoft YaHei",arial,simsun,sans-serif;
  }
  .ewm {
    width: 96%;
    margin-left: 2%;
    text-align: center;
    span {
      width: 178px;
      text-align: center;
      margin: 5%;
      display: inline-block;
      img {
        width: 158px;
        display: block;
        margin-left: 10px;
            border: none;
    vertical-align: middle;
      }
    }
  }
}
</style>
